<template>
	<view>
		<view class="head">
			<text class="balanceFont">账户可用余额(元)</text>
			<view class="moneyNumbox">
				<text class="moneyNum">{{moneyNum}}</text>
			</view>
			<view @click="goCash" class="cashBox">
				<text>提现</text>
			</view>
		</view>
		<view @click="goRecord" class="withdrawalBox">
			<text class="withdrawalFont">提现记录</text>
			<image class="rightjt" src="../../../static/user2/rightjt.png"></image>
		</view>
		<view class="main">
			<view class="tabHead">
				<view class="tipsBox">
					<text class="frame"></text>
					<text class="record">收支记录</text>
					<text class="specificTime">{{specificTime}}</text>
				</view>
				<view class="tabfoterBox">
					<view :class="{tabSonbox:index==num}" @click="qiehuan(index,item)" v-for="(item,index) in tabData" :key="index">
						<view class="tabcontent">
							{{item.tabcontent}}
						</view>
					</view>
				</view>
			</view>
			<view class="foterBox">
				<view class="orderInfobox" v-for="(item,index) in orderData" :key="index">
				<text class="orderStatus">{{item.orderStatus}}</text>
				<image class="timeIcon" src="../../../static/task/bianhao3.png"></image>
				<text class="time">{{item.month}}{{item.time}}</text>	
				<image class="numberIcon" src="../../../static/user2/number.png"></image>
				<text class="number">订单号:{{item.number}}</text>
				<text class="amount">+{{item.amount}}</text>
			</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:0,
				specificTime:'2020年4月12日',
				moneyNum:'864.32',
				unsettledAmount:'520.154',
				settledAmount:'864.12',
				tabData:[{
					tabcontent:'已结算'
				},
				{
					tabcontent:'进行中'
				},
				{
					tabcontent:'已取消'
				}],
				orderData:[{
					orderStatus:'订单已完成',
					month:'2020-04-12',
					time:'12:30',
					number:'202003200001',
					amount:'100'
				},
				{
					orderStatus:'订单已完成',
					month:'2020-04-12',
					time:'12:30',
					number:'202003200001',
					amount:'100'
				},
				{
					orderStatus:'订单已完成',
					month:'2020-04-12',
					time:'12:30',
					number:'202003200001',
					amount:'100'
				},
				{
					orderStatus:'订单已完成',
					month:'2020-04-12',
					time:'12:30',
					number:'202003200001',
					amount:'100'
				},
				{
					orderStatus:'订单已完成',
					month:'2020-04-12',
					time:'12:30',
					number:'202003200001',
					amount:'100'
				},
				{
					orderStatus:'订单已完成',
					month:'2020-04-12',
					time:'12:30',
					number:'202003200001',
					amount:'100'
				},
				{
					orderStatus:'订单已完成',
					month:'2020-04-12',
					time:'12:30',
					number:'202003200001',
					amount:'100'
				},
				{
					orderStatus:'订单已完成',
					month:'2020-04-12',
					time:'12:30',
					number:'202003200001',
					amount:'100'
				}]
			};
		},
		methods:{
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},
				goRecord(){
					uni.navigateTo({
						url:'./withdrawalRecord'
					})
					},
					qiehuan(index,item){
						var self=this;
						this.num=index;
					},
					goCash(){
						uni.navigateTo({
							url:'./withdrawalApplication'
						})
					}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f1f1f1;
	}
		.head{
			width: 744rpx;
			height: 334rpx;
			background: url(../../../static/user2/bg.png) no-repeat;
			background-size: cover;
			position: relative;
			top: 0rpx;
			left: 3rpx;
			}
			.balanceFont{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(255,255,255,1);
				position: absolute;
				top: 49rpx;
				left: 262rpx;
			}
			.moneyNumbox{
				width: 744rpx;
				height: 60rpx;
				
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				top: 125rpx;
				}
			.moneyNum{
				font-size:56rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(255,255,255,1);
			}
			.cashBox{
				width:90rpx;
				height:40rpx;
				border:1rpx solid rgba(239,239,244,1);
				border-radius:20rpx;
				font-size:24rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(255,255,255,1);
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				bottom: 57rpx;
				left: 327rpx;
			}
			.withdrawalBox{
				width:710rpx;
				height:100rpx;
				background:rgba(255,255,255,1);
				border-radius:20rpx;
				margin-top: 3rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				position: relative;
			}
			.withdrawalFont{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
				position: absolute;
				left: 20rpx;
			}
			.rightjt{
				width:14rpx;
				height:22rpx;
				position: absolute;
				right: 20rpx;
			}
			.main{
				width:710rpx;
				height:714rpx;
				background:rgba(255,255,255,1);
				border-radius:20rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
				position: relative;
				overflow: hidden;
			}
			.tabHead{
				width: 710rpx;
				height: 180rpx;
				border-bottom: 1rpx solid #E5E5E5;
			}
			.tipsBox{
				width: 710rpx;
				height: 90rpx;
			    display: flex;
				align-items: center;
			}
			.frame{
				display: block;
				width:10rpx;
				height:30rpx;
				background:rgba(115,34,216,1);
				border-radius:5rpx;
				position: absolute;
				left: 20rpx;
			}
			.record{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
				position: absolute;
				left: 38rpx;
			}
			.specificTime{
				font-size:24rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
				position: absolute;
				right: 20rpx;
			}
			.tabfoterBox{
				width: 710rpx;
				height: 90rpx;
				display: flex;
				align-items: center;
			}
			.tabSonbox{
				width:238rpx;
				height:86rpx;
				background:rgba(115,34,216,1);
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(255,255,255,1);
				border-radius:10rpx;
				}
				.tabcontent{
					width:238rpx;
					height:86rpx;
					border-radius:10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size:28rpx;
				}
				.foterBox{
					width: 710rpx;
					height: 534rpx;
					overflow-y: scroll;
				}
				.orderInfobox{
					width: 670rpx;
					height: 140rpx;
					border-bottom: 1rpx solid #E5E5E5;
					position: relative;
					left: 20rpx;
				}
				.orderStatus{
					font-size:30rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(51,51,51,1);
					position: absolute;
					top: 25rpx;
					left: 0rpx;
				}
				.timeIcon{
					width: 22rpx;
					height: 22rpx;
					position: absolute;
					bottom: 27rpx;
					left: 0rpx;
				}
				.time{
					font-size:22rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(142,142,142,1);
					position: absolute;
					bottom: 25rpx;
					left: 30rpx;
				}
				.numberIcon{
					width:25rpx;
					height:18rpx;
					position: absolute;
					bottom: 30rpx;
					left: 296rpx;
				}
				.number{
					font-size:22rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(142,142,142,1);
					position: absolute;
					bottom: 26rpx;
					left:328rpx;
				}
				.amount{
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(255,59,48,1);
					position: absolute;
					top:50rpx;
					right: 20rpx;
				}
</style>
